<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
	
	
<h:head>
	<title>Mapas</title>
	<script src="http://maps.google.com/maps/api/js?sensor=false"
		type="text/javascript"></script>
	<script type="text/javascript">
		var currentMarker = null;

		function handlePointClick(event) {
			if (currentMarker == null) {
				document.getElementById('lat').value = event.latLng.lat();
				document.getElementById('lng').value = event.latLng.lng();

				currentMarker = new google.maps.Marker({
					position : new google.maps.LatLng(event.latLng.lat(),
							event.latLng.lng())
				});

				map.addOverlay(currentMarker);

				dlg.show();
			}
		}

		function markerAddComplete() {
			var title = document.getElementById('title');
			currentMarker.setTitle(title.value);
			title.value = "";

			currentMarker = null;
			dlg.hide();
		}

		function cancel() {
			dlg.hide();
			currentMarker.setMap(null);
			currentMarker = null;

			return false;
		}
	</script>
</h:head>

<h:body>
	<h1>Mapas</h1>
	<p:panel>
		<p:growl id="messages" showDetail="true" />

		<p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="HYBRID"
			style="width:600px;height:400px" model="#{mapBean.emptyModel}"
			onPointClick="handlePointClick(event);" widgetVar="map" />

		<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5"
			close="false" fixedCenter="true">
			<h:form prependId="false">
				<h:panelGrid columns="2">
					<h:outputLabel for="title" value="Title:" />
					<p:inputText id="title" value="#{mapBean.title}" />

					<f:facet name="footer">
						<p:commandButton value="Add" actionListener="#{mapBean.addMarker}"
							update="messages" oncomplete="markerAddComplete()" />
						<p:commandButton value="Cancel" onclick="return cancel()" />
					</f:facet>
				</h:panelGrid>

				<h:inputHidden id="lat" value="#{mapBean.lat}" />
				<h:inputHidden id="lng" value="#{mapBean.lng}" />
			</h:form>
		</p:dialog>
	</p:panel>
	
	<p:panel>
		<h:form>

			<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"
				style="width:600px;height:400px" model="#{mapBean1.advancedModel}"
				overlaySelectListener="#{mapBean1.onMarkerSelect}">

				<p:gmapInfoWindow>
					<p:outputPanel style="text-align:center;display:block;margin:auto:">

						<p:graphicImage value="#{mapBean1.marker.data}" />
						<br />
						<h:outputText value="#{mapBean1.marker.title}" />

					</p:outputPanel>

				</p:gmapInfoWindow>
			</p:gmap>

		</h:form>
	</p:panel>

</h:body>
</html>